import React, { Component } from 'react'
//受控组件
let obj = {
    a: 100,
    fn(){
        console.log(this.a)
    },
    b: 200
}
const ele = '<h1>hello</h1>'
class Post extends Component {
    state={title: '123'}
    handleTitle = (e) => {
        this.setState({ title: e.target.value })
    }
    postTopic = () => {
        console.log(this.state.title);
        console.log(this.content.value);
        // 请求的方式：get post put delete
        fetch(
            'https://cnodejs.org/api/v1/topics',
            {
                method: 'post',
                body: JSON.stringify(
                        {
                            accesstoken: 'f1b0b7b4-a29b-48a4-b202-fa21e53308c0',
                            tab: 'dev',
                            title: this.state.title,
                            content: this.content.value
                        }
                    )
            }
        )
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
            })
    }
    render() {
        return (
            <div className='post' style={{ flex: 1 }}>
                <div dangerouslySetInnerHTML={{__html: ele}}></div>
                <h1>发布话题</h1>
                <label htmlFor="title">
                    标题
                </label>
                <input 
                    id='title'
                    value={this.state.title} 
                    onChange={this.handleTitle} 
                    type="text"
                    placeholder='title'
                />
                <input 
                    ref={(input)=>{this.content = input}}
                    type="text"
                    placeholder='内容'
                />
                <button onClick={this.postTopic}>发布</button>
            </div>
        )
    }
}
export default Post;